<template>
    <div class="table-div">
        <!-- 表格头部面板 -->
        <div class="table-panel">
            <!-- 
                @keyup.native ---- 键盘松开事件
                @keyup.enter.native ---- 回车事件
             -->

            <el-input

                v-model="search.keyword"

                placeholder="关键字查询"
                class="filter-item"
                @keyup.enter.native="initTableData"
                @keyup.native="initTableData"
            />
            <!-- <el-button class="button-item" type="primary" icon="el-icon-edit" @click="addModel()">新增</el-button> -->
            <!-- <el-button
                :loading="downloadLoading"
                class="button-item"
                type="primary"
                icon="el-icon-download"
                @click="exportData()"
                >导出
            </el-button> -->
                         
              <template>
              <download-excel
              class="button-item"
              :data="tableData.list"
              :fields="json_fields"
              :header="title"
              name="全部订单.xls"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button type="success" icon="el-icon-download">导出</el-button>
              </download-excel>
              </template>
        </div>
        <!-- 
            表格
            @row-click ---- 行点击事件
            @select-all ---- 全选事件
            @select ---- 选择事件
            :default-sort="{ prop: 'id', order: 'descending' }"
        -->
        <el-table
            ref="list"
            :data="tableData.list"
            style="width: 100%; margin-top: 10px"
            border
            stripe
            highlight-current-row
            @sort-change="changeSort"
            id="exportTable"
        >
            <!-- 
                sortable ---- 未开启后台分页时使用
                sortable="custom" ---- 开启后台分页时使用，table 中用 sort-change 监听排序点击事件
            -->
            <el-table-column property="id" label="ID" width="120" align="center" sortable="custom"> </el-table-column>
            <el-table-column property="orderTenantId" label="租户ID" width="100" align="center" sortable="custom">
            </el-table-column>
            <el-table-column property="orderLandlordId" label="房东ID" width="100" align="center" sortable="custom"> </el-table-column>
            <el-table-column property="orderCreateTime" label="创建时间" width="220" align="center" sortable="custom">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 5px">{{ scope.row.orderCreateTime }}</span>
                </template>
            </el-table-column>
            <el-table-column property="orderDealTime" label="完成时间" width="220" align="center" sortable="custom">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 5px">{{ scope.row.orderDealTime }}</span>
                </template>
            </el-table-column>
            <el-table-column property="orderLeasingId" label="出租房ID"  align="center" sortable="custom"> </el-table-column>
            <el-table-column label="操作" width="130" align="center">
                <template slot-scope="scope">
                    <el-button
                        circle
                        icon="el-icon-delete"
                        type="danger"
                        title="删除"
                        size="small"
                        @click="deleteModel(scope.row)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 
            分页
            :tableData ---- 将 tableData 作为参数传递给子组件 Pagination
            @emitPageData ---- 子组件 $emit 函数定义的 key
            receivePageData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
        -->
        <Pagination :tableData="tableData" @emitPageData="receivePageData"></Pagination>
        <!-- 
            Model 编辑弹出窗
            :dialogData ---- 將 dialogData 作为参数传递给子组件 userEdit.vue
            @emitDialogData ---- 子组件 $emit 函数定义的 key
            receiveDialogData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
        -->
        <!-- <UserEdit :dialogData="dialogData" @emitDialogData="receiveDialogData"></UserEdit> -->
    </div>
</template>

<script>
import Pagination from "@/components/fragments/Pagination.vue"
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  name: "Orders",
  components: {
    Pagination
  },
    data() {
    return {
        title:"全部订单",
         json_fields: {
        "订单ID":'id',
        "租户ID":'orderTenantId',
        "房东ID":'orderLandlordId',
        "订单创建时间":'orderCreateTime',
        "订单完成时间":'orderDealTime',
        "出租房ID":'orderLeasingId',
      },
      tableData: {
        pageNum: 1,
        pageSize: 5,
        total: 40,
        list: {}, // 当前页数据集合
      },
            // 查询参数
           search: {
                currentPage: 1,
                pageSize: 5,
                keyword: "",
                sort: "id",
                direction: "desc",
            },
     }
  },
  methods: {
        // 初始化表格数据
        initTableData: function () {
            var self = this;
            $.ajax({
                url:"http://127.0.0.1:8000/api/rentorder/orders",
                type:"post",
                contentType:"application/json",
                data:JSON.stringify(self.search),
                success:function(rs){
                    self.tableData = rs;
                },
                error:function() {
                    //TODO
                }
            });
        },
        // 列排序事件
        changeSort: function (obj){
            this.search.sort = this.$Common.camecaseToLine(obj.prop);
            this.search.direction = obj.order == "descending" ? "desc" : "asc";
            this.initTableData();
        },
        // 接收分页组件 $emit 函数传递的值
         receivePageData: function (tableData){
            this.search.currentPage = tableData.pageNum;
            this.search.pageSize = tableData.pageSize;
            this.initTableData();
         },
        // 接收编辑组件 $emit 函数传递的值
        receiveDialogData: function (showEditDialog){},
        // 新增模型
        addModel: function (){},
        // 修改模型
        editModel: function (row){},
        // 删除模型
                // 删除 model
        deleteModel: function (row) {
            this.$confirm("确定要删除当前行吗？", "删除", {
				comfirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					var url = "/api/rentorder/delete/" + row.id;
					this.$Request
						.fetch_(url, "delete", {})
						.then((result) => {
							if (result.status == this.$Request.OK_CODE) {
								this.$message({
									message: "删除成功",
									type: "success",
									duration: 2 * 1000,
								});
								this.search.currentPage = 1;
								this.initTableData();
							} else {
								this.$message.error(result.message);
							}
						})
						.catch(() => { });
				})
				.catch(() => { });
		},
        // 导出模型
        exportData: function () {
        },

  },
        mounted: function () {
        this.initTableData();
        },
};
</script>

<style>
.table-div {
  margin-top: 10px;
}

.filter-item {
  float: right;
  width: 200px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  /* margin-right: 5px; */
}

.button-item {
  float: left;
  width: 100px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-right: 5px;
}
</style>
